<template>
  <view class="container">
    <view class="form-card">
      <view class="header">
        <text class="title">子皮通告</text>
        <text class="subtitle">达人商务合作博主报名表</text>
      </view>
      
      <form @submit="handleSubmit" class="form">
        <view class="form-group" :class="{ 'error': errors.link }">
          <text class="label">您的小红书链接 <text class="required">*</text></text>
          <text class="label-desc">请填写您的小红书链接（小红书App—我——右上角（复制链接））</text>
          <textarea 
            class="input textarea_link" 
            :maxlength="-1"
            v-model="formData.link" 
            placeholder="请输入您的小红书链接"
            @blur="validateField('link')"
            @input="clearError('link')"
          />
          <text v-if="errors.link" class="error-message">{{ errors.link }}</text>
        </view>
        
        <view class="form-group" :class="{ 'error': errors.fans }">
          <text class="label">您的粉丝数 <text class="required">*</text></text>
          <text class="label-desc">请填写您当前的小红书粉丝数</text>
          <input 
            class="input" 
            type="number"
            v-model="formData.fans" 
            placeholder="请输入您的粉丝数"
            @blur="validateField('fans')"
            @input="clearError('fans')"
          />
          <text v-if="errors.fans" class="error-message">{{ errors.fans }}</text>
        </view>
        
        <view class="form-group" :class="{ 'error': errors.category }">
          <text class="label">您的账号类目是？ <text class="required">*</text></text>
          <picker 
            class="picker" 
            :value="categoryIndex" 
            :range="categoryOptions" 
            @change="handleCategoryChange"
          >
            <view class="picker-text">
              {{ formData.category || '请选择账号类目' }}
            </view>
          </picker>
          <text v-if="errors.category" class="error-message">{{ errors.category }}</text>
        </view>
        
        <view class="price-tip">
          <text class="price-tip-title">整体报价提示：</text>
          <text class="price-tip-content">
            素人（百粉以内）直发3-5元，其他粉丝报价为粉丝数/10，视频价比图文价略高
          </text>
        </view>

        <view class="form-group" :class="{ 'error': errors.zf_price }">
          <text class="label">直发价</text>
          <input 
            class="input" 
            type="number"
            v-model="formData.zf_price" 
            placeholder="请输入直发价格"
            @blur="validateField('zf_price')"
            @input="clearError('zf_price')"
          />
          <text v-if="errors.zf_price" class="error-message">{{ errors.zf_price }}</text>
        </view>
        <view class="form-group" :class="{ 'error': errors.pic_price }">
          <text class="label">图文价</text>
          <input 
            class="input" 
            type="number"
            v-model="formData.pic_price" 
            placeholder="请输入图文价格"
            @blur="validateField('pic_price')"
            @input="clearError('pic_price')"
          />
          <text v-if="errors.pic_price" class="error-message">{{ errors.pic_price }}</text>
        </view>
        <view class="form-group" :class="{ 'error': errors.video_price }">
          <text class="label">视频价</text>
          <input 
            class="input" 
            type="number"
            v-model="formData.video_price" 
            placeholder="请输入视频价格"
            @blur="validateField('video_price')"
            @input="clearError('video_price')"
          />
          <text v-if="errors.video_price" class="error-message">{{ errors.video_price }}</text>
        </view>
        
        <view class="form-group" :class="{ 'error': errors.country }">
          <text class="label">所在国家/地区 <text class="required">*</text></text>
          <picker 
            class="picker" 
            :value="countryIndex" 
            :range="countryOptions" 
            @change="handleCountryChange"
          >
            <view class="picker-text">
              {{ formData.country || '请选择国家/地区' }}
            </view>
          </picker>
          <text v-if="errors.country" class="error-message">{{ errors.country }}</text>
        </view>

        <view class="form-group" v-if="formData.country === '中国'">
          <text class="label">您的所在城市？</text>
          <text class="label-desc">不必详细到门牌号，因产品限制，需精确到"区"即可。</text>
          
          <view class="picker-trigger" @click="onPickerClick">
            <text class="picker-text">{{ formData.city || '请选择城市' }}</text>
            <text class="picker-arrow" :class="{ 'rotated': showCityPicker }">▼</text>
          </view>
        </view>

        <view class="form-group" v-if="formData.country === '中国'">
          <text class="label">寄件地址</text>
          <text class="label-desc">请填写您的详细寄件地址，用于接收合作产品</text>
          
          <view class="picker-trigger" @click="onAddressPickerClick">
            <text class="picker-text">{{ formData.address || '请选择寄件地址' }}</text>
            <text class="picker-arrow" :class="{ 'rotated': showAddressPicker }">▼</text>
          </view>
          <view class="form-group" :class="{ 'error': errors.street }">
            <input 
              class="input" 
              type="text"
              v-model="formData.street" 
              placeholder="请输入详细地址，如：XX路XX号XX室"
              @blur="validateField('street')"
              @input="clearError('street')"
            />
            <text v-if="errors.street" class="error-message">{{ errors.street }}</text>
          </view>
          
        </view>

        <view class="form-group" v-if="formData.country === '海外'" :class="{ 'error': errors.overseasAddress }">
          <text class="label">您的详细地址 <text class="required">*</text></text>
          <text class="label-desc">请填写您的详细地址，用于接收合作产品</text>
          <textarea 
              class="input textarea textarea-overseas" 
              v-model="formData.overseasAddress" 
              placeholder="请输入详细地址，包括国家、城市、街道等信息"
              @blur="validateField('overseasAddress')"
              @input="clearError('overseasAddress')"
            />
          <text v-if="errors.overseasAddress" class="error-message">{{ errors.overseasAddress }}</text>
        </view>

        <view class="form-group" :class="{ 'error': errors.email }">
          <text class="label">您的邮箱是？</text>
          <text class="label-desc">如有合作品牌意向时，我们可能会与您联系</text>
          <input 
            class="input" 
            v-model="formData.email" 
            placeholder="请输入您的邮箱"
            @blur="validateField('email')"
            @input="clearError('email')"
          />
          <text v-if="errors.email" class="error-message">{{ errors.email }}</text>
        </view>

        

        <view class="form-group">
          <text class="label">您的微信是？</text>
          <text class="label-desc">如有合作品牌意向时，我们可能会与您联系</text>
          <input 
            class="input" 
            v-model="formData.wechat" 
            placeholder="请输入您的微信号"
          />
        </view>
        
        <button 
          class="submit-btn" 
          :class="{ 'loading': isSubmitting }"
          :disabled="isSubmitting"
          @click="handleSubmit"
        >
          <text v-if="!isSubmitting" class="btn-text">提交信息</text>
          <view v-else class="loading-spinner"></view>
        </button>
      </form>
    </view>

    <u-picker 
        :show="showCityPicker" 
        :columns="cityColumns" 
        @confirm="onCityConfirm" 
        @cancel="showCityPicker = false"
        @change="onCityChange"
        title="选择城市"
      >
      </u-picker>
      
    <u-picker 
        :show="showAddressPicker" 
        :columns="addressColumns" 
        @confirm="onAddressConfirm" 
        @cancel="showAddressPicker = false"
        @change="onAddressChange"
        title="选择寄件地址"
      >
      </u-picker>
      
    <!-- 用户协议和隐私政策弹窗 -->
    <u-modal 
      :show="showAgreementModal" 
      title="温馨提示" 
      @confirm="agreeToTerms" 
      @cancel="disagreeToTerms"
      confirmText="同意"
      cancelText="不同意"
      :showCancelButton="true"
    >
      <view class="agreement-content">
        <text>欢迎使用我们的服务！</text>
        <text>请您在使用前仔细阅读</text>
        <text class="agreement-link" @click.stop="showTerms">《用户服务协议》</text>
        <text>和</text>
        <text class="agreement-link" @click.stop="showPrivacy">《隐私政策》</text>
        <text>，点击"同意"即表示您已阅读并同意上述条款。</text>
      </view>
    </u-modal>
	
	<!-- <button open-type="share"></button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
        formData: {
            link: '',
            fans: '',
            category: '',
            zf_price: '',
            pic_price: '',
            video_price: '',
            country: '',
            city: '',
            address: '',
            street: '',
            overseasAddress: '',
            email: '',
            wechat: '',
            agree: false
            },
            loading: false,
            errors: {},
            isSubmitting: false,
            debounceTimer: null,
            categoryIndex: 0,
            categoryOptions: ['美妆', '护肤', '穿搭', '母婴', '家居', '生活方式', '好物推荐', '数码科技', '旅行', '其他'],
            countryIndex: 0,
            countryOptions: ['中国', '海外'],
        validationRules: {
        link: {
          required: true,
        },
        fans: {
          required: true,
          pattern: /^[1-9]\d*$/
        },
        category: {
          required: false
        },
        zf_price: {
          required: true,
          isNumber: true,
          minValue: 0
        },
        pic_price: {
          required: true,
          isNumber: true,
          minValue: 0
        },
        video_price: {
          required: true,
          isNumber: true,
          minValue: 0
        },
        country: {
          required: true
        },
        city: {
          required: function() { return this.formData.country === '中国'; }
        },
        address: {
          required: function() { return this.formData.country === '中国'; }
        },
        street: {
          required: function() { return this.formData.country === '中国'; },
          minLength: 5
        },
        overseasAddress: {
          required: function() { return this.formData.country === '海外'; },
          minLength: 10
        },
        email: {
          required: true,
          pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        },
        wechat: {
          required: true
        }
      },
      errorMessages: {
        link: {
          required: '请输入小红书链接',
          pattern: '请输入有效的小红书链接'
        },
        fans: {
          required: '请输入粉丝数',
          pattern: '粉丝数必须大于0'
        },
        category: {
          required: '请选择账号类目'
        },
        zf_price: {
          required: '请输入直发价',
          isNumber: '直发价必须为数字',
          minValue: '直发价不能小于0'
        },
        pic_price: {
          required: '请输入图文价',
          isNumber: '图文价必须为数字',
          minValue: '图文价不能小于0'
        },
        video_price: {
          required: '请输入视频价',
          isNumber: '视频价必须为数字',
          minValue: '视频价不能小于0'
        },
        country: {
          required: '请选择所在国家/地区'
        },
        city: {
          required: '请选择所在城市'
        },
        address: {
          required: '请选择寄件地址'
        },
        street: {
          required: '请输入详细地址',
          minLength: '详细地址至少需要5个字符'
        },
        overseasAddress: {
          required: '请输入海外详细地址',
          minLength: '详细地址至少需要10个字符'
        },
        email: {
          required: '请输入邮箱地址',
          pattern: '请输入有效的邮箱地址'
        },
        wechat: {
          required: '请输入微信号'
        },
        agree: {
          required: '请同意服务条款和隐私政策'
        }
      },
      showCityPicker: false,
      cityColumns: [],
      cityData: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      showAddressPicker: false,
      addressColumns: [],
      selectedAddressProvince: '',
      selectedAddressCity: '',
      selectedAddressDistrict: '',
      showAgreementModal: false, // 用户协议弹窗控制
      hasAgreed: false // 用户是否同意协议
    }
  },
  mounted() {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"]
    })
  },
  onLoad() {
    // 页面加载时显示协议弹窗
    this.showAgreementModal = true;
  },
  onBeforeUnmount() {
    // 组件销毁前清理防抖定时器
    if (this.debounceTimer) {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = null;
    }
  },
  methods: {
    // 同意条款
    agreeToTerms() {
      this.hasAgreed = true;
      this.showAgreementModal = false;
    },
    
    // 不同意条款
    disagreeToTerms() {
      // 用户不同意，返回上一页
      uni.showToast({
        title: '您需要同意协议才能继续使用',
        icon: 'none',
        duration: 2000
      });
      
      setTimeout(() => {
        uni.navigateBack();
      }, 2000);
    },
    
    async onPickerClick() {
      await this.initCityData();
      this.showCityPicker = true;
    },
    
    async onAddressPickerClick() {
      await this.initAddressData();
      this.showAddressPicker = true;
    },
    // 验证单个字段
    validateField(fieldName) {
      const value = this.formData[fieldName];
      const rules = this.validationRules[fieldName];
      
      if (!rules) return true;
      
      // 必填验证
      if (rules.required) {
        // 如果required是函数，则执行函数判断是否必填
        const isRequired = typeof rules.required === 'function' ? rules.required.call(this) : rules.required;
        
        if (isRequired && (!value || value.trim() === '')) {
          this.$set(this.errors, fieldName, this.errorMessages[fieldName].required);
          return false;
        }
      }
      
      // 如果字段为空且不是必填，则跳过其他验证
      if (!value || value.trim() === '') {
        this.$delete(this.errors, fieldName);
        return true;
      }
      
      // 正则表达式验证
      if (rules.pattern && !rules.pattern.test(value)) {
        this.$set(this.errors, fieldName, this.errorMessages[fieldName].pattern);
        return false;
      }
      
      // 数字验证
      if (rules.isNumber && value !== '') {
        const num = Number(value);
        if (isNaN(num)) {
          this.$set(this.errors, fieldName, this.errorMessages[fieldName].isNumber);
          return false;
        }
        
        // 最小值验证
        if (rules.minValue !== undefined && num < rules.minValue) {
          this.$set(this.errors, fieldName, this.errorMessages[fieldName].minValue);
          return false;
        }
      }
      
      // 最小长度验证
      if (rules.minLength && value.length < rules.minLength) {
        this.$set(this.errors, fieldName, this.errorMessages[fieldName].minLength);
        return false;
      }
      
      this.$delete(this.errors, fieldName);
      return true;
    },
    
    // 清除错误
    clearError(fieldName) {
      if (this.errors[fieldName]) {
        this.$delete(this.errors, fieldName);
      }
    },
    
    // 处理类目选择
    handleCategoryChange(e) {
      this.categoryIndex = e.detail.value;
      this.formData.category = this.categoryOptions[this.categoryIndex];
    },
    
    // 处理国家选择
    handleCountryChange(e) {
      this.countryIndex = e.detail.value;
      this.formData.country = this.countryOptions[this.countryIndex];
      
      // 清除相关字段的错误
      if (this.formData.country === '中国') {
        this.clearError('overseasAddress');
      } else {
        // 如果选择海外，给city字段赋值为"海外"
        this.formData.city = '海外';
        this.clearError('city');
        this.clearError('address');
        this.clearError('street');
      }
    },
    
    // 处理城市选择变化
    onchange(e) {
      console.log('城市选择变化:', e);
      // 处理城市选择结果
      if (e.detail && e.detail.value) {
        this.formData.city = e.detail.value;
      }
    },
    
    // 处理城市节点点击
    onnodeclick(node) {
      console.log('城市节点点击:', node);
    },

    // 初始化城市数据
    async initCityData() {
      if (this.cityData.length > 0) return;

      try {
        // 导入城市数据
        const cityJson = await import('@/utils/city.json');
        this.cityData = cityJson.data;

        let cityColumns = this.cityData.filter(item => item.level === 1).map(item => item.district)
        let cityColumns2 = this.cityData.filter(item => item.pid === 2).map(item => item.district)
        let cityColumns3 = this.cityData.filter(item => item.pid === 52).map(item => item.district)
        
        this.cityColumns = [
          cityColumns,
          cityColumns2,
          cityColumns3
        ];

        
      } catch (error) {
        console.error('加载城市数据失败:', error);
        // 如果加载失败，使用默认数据
        this.cityColumns = [
          { values: ['北京市', '上海市', '广东省', '江苏省', '浙江省', '四川省', '湖北省', '湖南省', '山东省', '河南省'] },
          { values: ['朝阳区', '海淀区', '东城区', '西城区', '丰台区'] },
          { values: [] }
        ];
      }
    },
    
    // 初始化寄件地址数据
    async initAddressData() {
      if (this.addressColumns.length > 0) return;

      try {
        // 导入城市数据
        const cityJson = await import('@/utils/city.json');
        const addressData = cityJson.data;

        let addressColumns = addressData.filter(item => item.level === 1).map(item => item.district)
        let addressColumns2 = addressData.filter(item => item.pid === 2).map(item => item.district)
        let addressColumns3 = addressData.filter(item => item.pid === 52).map(item => item.district)
        
        this.addressColumns = [
          addressColumns,
          addressColumns2,
          addressColumns3
        ];

        
      } catch (error) {
        console.error('加载寄件地址数据失败:', error);
        // 如果加载失败，使用默认数据
        this.addressColumns = [
          { values: ['北京市', '上海市', '广东省', '江苏省', '浙江省', '四川省', '湖北省', '湖南省', '山东省', '河南省'] },
          { values: ['朝阳区', '海淀区', '东城区', '西城区', '丰台区'] },
          { values: [] }
        ];
      }
    },
    
    // 处理城市选择变化
    onCityChange(e) {
      const { columnIndex, value, values } = e;
      
      if (columnIndex === 0) {
        // 省份改变，更新城市列表
        // 先找到当前选中的省份的district_id
        const selectedProvince = value[columnIndex];
        const provinceObj = this.cityData.find(item => item.district === selectedProvince && item.level === 1);
        let cityList = [];
        let districtList = [];
        if (provinceObj) {
          // 查找该省份下的所有城市
          cityList = this.cityData.filter(item => item.pid === provinceObj.district_id && item.level === 2).map(item => item.district);
          // 默认选中第一个城市，查找其下的区县
          if (cityList.length > 0) {
            const firstCityObj = this.cityData.find(item => item.district === cityList[0] && item.level === 2);
            if (firstCityObj) {
              districtList = this.cityData.filter(item => item.pid === firstCityObj.district_id && item.level === 3).map(item => item.district);
            }
          }
        }
        this.cityColumns = [
          this.cityData.filter(item => item.level === 1).map(item => item.district),
          cityList,
          districtList
        ];
      } else if (columnIndex === 1) {
        // 城市改变，更新区县列表
        const selectedProvince = values[columnIndex];
        const selectedCity = value[columnIndex];

        // 先找到省份对象
        const provinceObj = this.cityData.find(item => item.district === selectedCity);
        let districtList = [];
        if (provinceObj) {
            // 查找该城市下的所有区县
            districtList = this.cityData.filter(item => item.pid === provinceObj.district_id).map(item => item.district);
        }
        this.cityColumns.splice(2, 1, districtList);
      }
    },
    
    // 处理城市选择确认
    onCityConfirm(e) {
      const [province, city, district] = e.value;
      this.selectedProvince = province;
      this.selectedCity = city;
      this.selectedDistrict = district;
      
      // 组合完整的城市信息
      let cityText = province;
      if (city) cityText += city;
      if (district) cityText += district;
      
      this.formData.city = cityText;
      this.showCityPicker = false;
    },
    
    // 处理寄件地址选择变化
    onAddressChange(e) {
      const { columnIndex, value, values } = e;
      
      if (columnIndex === 0) {
        // 省份改变，更新城市列表
        const selectedProvince = value[columnIndex];
        const provinceObj = this.cityData.find(item => item.district === selectedProvince && item.level === 1);
        let cityList = [];
        let districtList = [];
        if (provinceObj) {
          // 查找该省份下的所有城市
          cityList = this.cityData.filter(item => item.pid === provinceObj.district_id && item.level === 2).map(item => item.district);
          // 默认选中第一个城市，查找其下的区县
          if (cityList.length > 0) {
            const firstCityObj = this.cityData.find(item => item.district === cityList[0] && item.level === 2);
            if (firstCityObj) {
              districtList = this.cityData.filter(item => item.pid === firstCityObj.district_id && item.level === 3).map(item => item.district);
            }
          }
        }
        this.addressColumns = [
          this.cityData.filter(item => item.level === 1).map(item => item.district),
          cityList,
          districtList
        ];
      } else if (columnIndex === 1) {
        // 城市改变，更新区县列表
        const selectedProvince = values[columnIndex];
        const selectedCity = value[columnIndex];

        // 先找到省份对象
        const provinceObj = this.cityData.find(item => item.district === selectedCity);
        let districtList = [];
        if (provinceObj) {
            // 查找该城市下的所有区县
            districtList = this.cityData.filter(item => item.pid === provinceObj.district_id).map(item => item.district);
        }
        this.addressColumns.splice(2, 1, districtList);
      }
    },
    
    // 处理寄件地址选择确认
    onAddressConfirm(e) {
      const [province, city, district] = e.value;
      this.selectedAddressProvince = province;
      this.selectedAddressCity = city;
      this.selectedAddressDistrict = district;
      
      // 组合完整的寄件地址信息
      let addressText = province;
      if (city) addressText += city;
      if (district) addressText += district;
      
      this.formData.address = addressText;
      this.showAddressPicker = false;
    },
    
    // 验证整个表单
    validateForm() {
      let isValid = true;
      
      // 验证所有字段
      Object.keys(this.validationRules).forEach(fieldName => {
        if (!this.validateField(fieldName)) {
          isValid = false;
        }
      });
      
      return isValid;
    },
    
    // 切换同意状态
    toggleAgree() {
      this.formData.agree = !this.formData.agree;
      this.clearError('agree');
    },
    
    // 显示服务条款
    showTerms() {
      // 阻止弹窗关闭
      this.showAgreementModal = false;
      
      uni.showModal({
        title: '用户服务协议',
        content: '欢迎您使用子皮通告平台！本协议是您与子皮通告平台之间关于使用本平台服务所订立的协议。使用本平台服务前，请您仔细阅读本协议的全部内容。如您不同意本协议的任何内容，请勿注册或使用本平台服务。如您对本协议有任何疑问，请联系我们的客服团队。',
        showCancel: false,
        confirmText: '我知道了',
        success: () => {
          // 重新显示主协议弹窗
          this.showAgreementModal = true;
        }
      });
    },
    
    // 显示隐私政策
    showPrivacy() {
      // 阻止弹窗关闭
      this.showAgreementModal = false;
      
      uni.showModal({
        title: '隐私政策',
        content: '子皮通告平台非常重视您的隐私保护。本隐私政策说明了我们如何收集、使用、存储和保护您的个人信息。我们只会收集必要的信息用于提供服务，并采取严格的安全措施保护您的数据安全。未经您的同意，我们不会向任何第三方分享您的个人信息。',
        showCancel: false,
        confirmText: '我知道了',
        success: () => {
          // 重新显示主协议弹窗
          this.showAgreementModal = true;
        }
      });
    },
    
    // 防抖函数
    debounce(func, delay = 1000) {
      // 如果已经有定时器，则清除
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer);
      }
      
      // 设置新的定时器
      this.debounceTimer = setTimeout(() => {
        func();
        this.debounceTimer = null;
      }, delay);
    },
    
    // 处理表单提交
    handleSubmit() {
      // 使用防抖处理提交
      this.debounce(() => {
        this.submitForm();
      }, 500); // 500ms 的防抖延迟
    },
    
    // 实际提交表单的方法
    async submitForm() {
      // 如果已经在提交中，则不再处理
      if (this.isSubmitting) {
        return;
      }
      
      // 检查用户是否同意协议
      if (!this.hasAgreed) {
        uni.showToast({
          title: '请先同意用户协议和隐私政策',
          icon: 'none',
          duration: 2000
        });
        this.showAgreementModal = true;
        return;
      }
      
      if (!this.validateForm()) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      this.isSubmitting = true;
      
      try {
        // 整合提交数据
        const submitData = {
          // 基本信息
          link: this.formData.link,                    // 小红书链接
          fans: this.formData.fans,                    // 粉丝数
          category: this.formData.category,            // 账号类目
          country: this.formData.country,              // 所在国家/地区
          email: this.formData.email,                  // 邮箱
          wechat: this.formData.wechat,                // 微信
          
          // 价格信息
          zf_price: this.formData.zf_price ? Number(this.formData.zf_price) : 0,            // 直发价
          pic_price: this.formData.pic_price ? Number(this.formData.pic_price) : 0,          // 图文价
          video_price: this.formData.video_price ? Number(this.formData.video_price) : 0      // 视频价
        };
        
        // 根据国家/地区添加不同的地址信息
        if (this.formData.country === '中国') {
          submitData.city = this.formData.city;
          submitData.address = this.formData.address;
          submitData.street = this.formData.street;
        } else {
          submitData.overseasAddress = this.formData.overseasAddress;
        }
        
        // 提交到 Records/addExpert 接口
        uni.request({
          url: this.$url + '/records/addExpert',
          method: 'POST',
          data: submitData,
        }).then(res => {
          console.log('API响应:', res);
          
          // 根据返回状态码判断是否成功
          if(res.data.code == 200) {
            // 提交成功
            uni.showToast({
              title: '提交成功！',
              icon: 'success',
              duration: 2000
            });
            
            // 重置表单
            this.resetForm();
          } else if(res.data.code == 500) {
            // 显示具体错误信息
            uni.showToast({
              title: res.msg || '服务器错误',
              icon: 'error',
              duration: 3000
            });
          } else {
            // 其他错误情况
            uni.showToast({
              title: '提交失败，请稍后重试',
              icon: 'error', 
              duration: 2000
            });
          }
        }).catch(error => {
          console.error('API提交失败:', error);
          uni.showToast({
            title: error.message || '网络错误，请稍后重试',
            icon: 'error',
            duration: 3000
          });
        }).finally(() => {
          // 恢复按钮状态
          this.isSubmitting = false;
        });
        
      } catch (error) {
        console.error('数据处理失败:', error);
        uni.showToast({
          title: '数据处理失败',
          icon: 'error',
          duration: 2000
        });
      } finally {
        this.isSubmitting = false;
      }
    },
    
    // 重置表单
    resetForm() {
      this.formData = {
        link: '',
        fans: '',
        category: '',
        zf_price: '',
        pic_price: '',
        video_price: '',
        country: '',
        city: '',
        address: '',
        street: '',
        overseasAddress: '',
        email: '',
        wechat: '',
        agree: false
      };
      this.errors = {};
      this.categoryIndex = 0;
      this.showCityPicker = false;
      this.showAddressPicker = false;
      this.selectedProvince = '';
      this.selectedCity = '';
      this.selectedDistrict = '';
      this.selectedAddressProvince = '';
      this.selectedAddressCity = '';
      this.selectedAddressDistrict = '';
      
      // 清除任何可能存在的防抖定时器
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = null;
      }
    }
		}
	}
</script>

<style lang="scss" scoped>
// 变量定义
$primary-color: #ff5b9e;
$secondary-color: #ffb6d7;
$error-color: #ff4757;
$success-color: #2ed573;
$text-primary: #333;
$text-secondary: #666;
$text-light: #999;
$border-color: #e1e5e9;
$bg-light: #f8f9fa;
$bg-error: #fff5f5;
$bg-gradient: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);

$border-radius: 24rpx;
$border-radius-sm: 8rpx;
$border-radius-lg: 40rpx;
$padding: 32rpx 40rpx;
$padding-sm: 28rpx 32rpx;
$shadow: 0 40rpx 80rpx rgba(0, 0, 0, 0.1);
$shadow-hover: 0 20rpx 40rpx rgba($primary-color, 0.2);

.container {
  min-height: 100vh;
  background: $bg-gradient;
  padding: 40rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-card {
  background: white;
  border-radius: $border-radius-lg;
  box-shadow: $shadow;
  padding: 80rpx 40rpx;
  width: 100%;
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.header {
  text-align: center;
  margin-bottom: 80rpx;
  
  .title {
    color: $text-primary;
    font-size: 56rpx;
    font-weight: 600;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .subtitle {
    color: $text-secondary;
    font-size: 32rpx;
    line-height: 1.5;
    display: block;
  }
}

.form {
  display: flex;
  flex-direction: column;
  gap: 48rpx;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 20rpx;
  .label {
    font-size: 28rpx;
    font-weight: 600;
    color: $text-primary;
    display: flex;
    align-items: center;
    gap: 8rpx;
    margin-bottom: 8rpx;
    
    .required {
      color: $error-color;
      font-weight: 600;
    }
  }
  
  .label-desc {
    font-size: 24rpx;
    color: $text-light;
    line-height: 1.4;
    margin-bottom: 16rpx;
  }
  
  .input, .textarea, .picker {
    padding: $padding;
    border: 4rpx solid $border-color;
    border-radius: $border-radius;
    font-size: 32rpx;
    transition: all 0.3s ease;
    background: $bg-light;
    color: $text-primary;
    &:focus {
      border-color: $primary-color;
      background: white;
      box-shadow: 0 0 0 6rpx rgba($primary-color, 0.1);
      transform: translateY(-2rpx);
    }
    
    &::placeholder {
      color: $text-light;
    }
  }
  
  .picker {
    position: relative;
    
    .picker-text {
      color: $text-primary;
    }
  }
  
  .picker-trigger {
    padding: $padding;
    border: 4rpx solid $border-color;
    border-radius: $border-radius;
    font-size: 32rpx;
    transition: all 0.3s ease;
    background: $bg-light;
    color: $text-primary;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    
    &:active {
      border-color: $primary-color;
      background: white;
      box-shadow: 0 0 0 6rpx rgba($primary-color, 0.1);
      transform: translateY(-2rpx);
    }
    
    .picker-text {
      color: $text-primary;
    }
    
    .picker-arrow {
      color: $text-light;
      font-size: 24rpx;
      transition: transform 0.3s ease;
    }
  }
  
  .city-picker {
    width: 100%;
    
    .uni-data-picker {
      width: 100%;
    }
    
    .uni-data-picker__input-text {
      padding: $padding;
      border: 4rpx solid $border-color;
      border-radius: $border-radius;
      font-size: 32rpx;
      transition: all 0.3s ease;
      background: $bg-light;
      color: $text-primary;
      
      &:focus {
        border-color: $primary-color;
        background: white;
        box-shadow: 0 0 0 6rpx rgba($primary-color, 0.1);
        transform: translateY(-2rpx);
      }
    }
  }
  
  .textarea {
    min-height: 200rpx;
    resize: none;
  }
  
  .textarea-overseas {
    min-height: 240rpx;
  }
  
  &.error {
    .input, .textarea, .picker {
      border-color: $error-color;
      background: $bg-error;
    }
    
    .picker-trigger {
      border-color: $error-color;
      background: $bg-error;
    }
    
    .city-picker {
      .uni-data-picker__input-text {
        border-color: $error-color;
        background: $bg-error;
      }
    }
  }
  
  .error-message {
    color: $error-color;
    font-size: 24rpx;
    margin-top: 8rpx;
  }
}

.checkbox-group {
  margin-top: 40rpx;
  padding: 24rpx;
  background: $bg-light;
  border-radius: $border-radius;
  
  .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 24rpx;
    cursor: pointer;
    
    .checkbox {
      width: 40rpx;
      height: 40rpx;
      border: 4rpx solid $border-color;
      border-radius: $border-radius-sm;
      position: relative;
      flex-shrink: 0;
      margin-top: 4rpx;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &.checked {
        background: $primary-color;
        border-color: $primary-color;
      }
      
      .checkmark {
        color: white;
        font-size: 24rpx;
        font-weight: bold;
      }
    }
    
    .checkbox-text {
      font-size: 28rpx;
      color: $text-secondary;
      line-height: 1.5;
      flex: 1;
      
      .link {
        color: $primary-color;
        text-decoration: none;
        font-weight: 500;
      }
    }
  }
}

.submit-btn {
  background: $bg-gradient;
  color: white;
  border: none;
  padding: 14rpx 64rpx;
  border-radius: $border-radius;
  font-size: 32rpx;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  margin-top: 40rpx;
  position: relative;
  overflow: hidden;
  box-shadow: $shadow;
  
  &:hover {
    transform: translateY(-4rpx);
    box-shadow: $shadow-hover;
  }
  
  &:active {
    transform: scale(0.98);
  }
  
  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  
  .loading-spinner {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    border-top: 4rpx solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 768px) {
  .form-card {
    padding: 60rpx 40rpx;
    margin: 20rpx;
  }
  
  .header {
    .title {
      font-size: 48rpx;
    }
    
    .subtitle {
      font-size: 28rpx;
    }
  }
  
  .form-group {
    .input, .textarea, .picker {
      padding: $padding-sm;
      font-size: 32rpx;
    }
    
    .picker-trigger {
      padding: $padding-sm;
      font-size: 32rpx;
    }
    
    .city-picker {
      .uni-data-picker__input-text {
        padding: $padding-sm;
        font-size: 32rpx;
      }
    }
    
    .label-desc {
      font-size: 22rpx;
    }
  }
  
  .submit-btn {
    padding: 32rpx 48rpx;
    font-size: 32rpx;
  }
  
  .checkbox-group {
    padding: 20rpx;
  }
}
.textarea_link, .textarea_address{
  box-sizing: border-box;
  width: 100%;
  height: 200rpx;
}

.price-tip {
  background: #f8f8fa;
  border-left: 4px solid #ffb300;
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 6px;
}
.price-tip-title {
  font-weight: bold;
  color: #ff9800;
  margin-right: 4px;
}
.price-tip-content {
  color: #666;
}

.agreement-content {
  padding: 20rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: $text-secondary;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.agreement-link {
  color: $primary-color;
  font-weight: 500;
  display: inline-block;
  margin: 10rpx 0;
}
</style>
